<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" xmlns:th="http://www.th.org">
    <title>商品详情页</title>
    <meta name="viewport" id="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/public/swiper-bundle.min.css}">
    <link rel="stylesheet" th:href="@{/detail.css}">

    <script th:src="@{/public/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/public/swiper-bundle.min.js}"></script>

    <script th:src="@{/detail.js}"></script>

    <!--  获取请求域中的值，转换为js变量  -->
    <script th:inline="javascript">
        const site = /*[[${site}]]*/"";
    </script>
</head>
<body>
<!--头部-->
<header>
    <div class="back"></div>
    <div class="text">商品详情</div>
    <div class="share"></div>
</header>
<!--主体-->
<div class="main">
    <div class="floor1 slider">
        <!--轮播图效果-->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" th:each="url:${good.getStringImagerArray()}"
                     th:style="'background-image: url('+${site+url}+')'"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!--摘要-->
    <div class="floor2 summary">
        <div>
            <span> ￥<i th:text="${good.price}"></i></span>
            <span>原价￥<i th:text="${good.originalPrice}"></i></span>
            <span>特价</span>
        </div>
        <p th:text="${good.summary}">后套盒，是的法国红酒看爱的色放股份回购</p>
    </div>
    <!--规格-->
    <div class="floor3 desc">
        <h1>商品详情</h1>
        <p>
            品牌：<i th:text="${good.brand}">爱鲜蜂</i>
        </p>
        <p>
            产品规格:<i th:text="${good.spec}">480-60</i>
        </p>
    </div>
    <div class="floor4 detail">
        <h1>图文详情</h1>
        <p th:text="${good.detail}"></p>
    </div>
</div>
<footer>

    <div class="index">
        <i></i>
        <b>首页</b>
    </div>
    <div class="cart">
        <i></i>
        <b>购物车</b>
    </div>
    <div class="add2cart">加入购物车</div>
    <div class="buy_now">立即购买</div>
</footer>
</body>
</html>